<template>
  <div class="app-page">
    <el-button type="primary" @click="loadMode">切换</el-button>
    <div id="editor"></div>
  </div>
</template>

<script>
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/clike/clike'
// 加载模块
import 'codemirror/addon/mode/loadmode'
// 设置选中行样式
import 'codemirror/addon/selection/active-line'
// 设置鼠标移上选中区域的效果
import 'codemirror/addon/selection/selection-pointer'
// 匹配括号
import 'codemirror/addon/edit/matchbrackets'
// 高亮选中匹配的单词，鼠标单击选中区域
import 'codemirror/addon/search/match-highlighter'
// import 'codemirror/addon/search/searchcursor'
// import 'codemirror/addon/search/matchesonscrollbar'
// import 'codemirror/addon/scroll/annotatescrollbar'
// 导入主题文件
import 'codemirror/theme/darcula.css'
import 'codemirror/theme/idea.css'
import 'codemirror/theme/material-darker.css'
import 'codemirror/theme/monokai.css'
export default {
  data() {
    return {
      editor: null
    }
  },
  methods: {
    // 初始化editor
    initEditor() {
      this.editor = CodeMirror(document.getElementById('editor'), {
        value: '',
        mode: 'javascript', //实现Java代码高亮
        lineNumbers: true, // 显示行号
        theme: 'monokai', // 设置主题ambiance\colorforth
        tabSize: 2, // tab宽度，默认为4
        styleActiveLine: true, // 高亮选中行
        matchBrackets: true, // 匹配括号
        highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}, // 高亮选中匹配到的
        selectionPointer: 'default', // 鼠标移上选中区域的效果'pointer'
      })
      // 设置字体大小
      document.querySelector('.CodeMirror').style.fontSize = 18 + 'px'
      // 设置值
      this.editor.setValue('function myScript(){\n\treturn 100;\n}')
    },
    loadMode () {
      // text/x-csrc
      // this.editor.getOption('mode')
      // CodeMirror.modeURL = "/node_modules/codemirror/mode/%N/%N.js"
      this.editor.setValue(`#include "sys.h"\n#include "usart.h"\n#include"delay.h"	\n#include "adc.h"\nint main(void){\n\t\n}`)
      this.editor.setOption('mode', 'text/x-c')
      // 返回所有mode对应的mineType：CodeMirror.mimeModes
    }
  },
  mounted () {
    this.initEditor()
  }
}
</script>

<style lang="scss">
.app-page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  #editor {
    width: 600px;
    height: 400px;
  }
  .break-point {
    position: absolute;
    left: 8px;
    list-style: none;
    z-index: 100;
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
  }
  pre.CodeMirror-line {
    // font-style: italic !important;
  }
  .cm-s-monokai .CodeMirror-gutters {
    border-right: 1px solid #ddd !important;
  }

  // 高亮选中的效果
  .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
  .CodeMirror-focused .cm-matchhighlight {
    background-image: url();
    background-position: bottom;
    background-repeat: repeat-x;
  }
  .cm-matchhighlight {background-color: lightgreen}
  .CodeMirror-selection-highlight-scrollbar {background-color: green}
    
}
</style>